<template>
  <div class="relative h-5 w-full overflow-hidden rounded-sm bg-gray-100">
    <div
      class="h-full transition-all duration-300 ease-in-out"
      :style="{
        width: barWidth,
        backgroundColor: barColor
      }"
    />
    <span class="flex-c text-text_color_primary absolute inset-0 text-xs">
      {{ displayText }}
    </span>
  </div>
</template>

<script>
export default {
  name: "ProgressBar",
  props: {
    percentage: {
      type: Number,
      required: true
    }
  },
  computed: {
    isValid() {
      return Number.isFinite(this.percentage) && this.percentage >= 0;
    },
    barWidth() {
      return this.isValid ? `${Math.min(this.percentage, 100)}%` : "0%";
    },
    barColor() {
      return this.isValid ? this.getColor : "var(--el-color-info-light-7)";
    },
    displayText() {
      return this.isValid ? `${this.percentage.toFixed(2)}%` : "N/A";
    },
    getColor() {
      if (this.percentage >= 95) return "var(--el-color-danger-dark-2)";
      if (this.percentage >= 80) return "var(--el-color-danger-light-3)";
      if (this.percentage >= 50) return "var(--el-color-success-light-3)";
      return "var(--el-color-success-dark-2)";
    }
  }
};
</script>
